<template>
  <div>
    <h2>组合API-数据的响应式</h2>
    <hr>
    <div>{{msg}}</div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // 主要的场景：定义基本数据类型为响应式数据（也支持对象和数组）
    const msg = ref('hello')
    // const obj = ref({ info: 'hi' })
    const arr = ref([])
    const handleClick = () => {
      // js中操作ref定义的数据，必须通过.value属性进行操作
      // 模板中操作ref的值，不需要value属性
      msg.value = 'nihao'
      // obj.value.info = 'nihao'
      arr.value.push('hello')
    }
    return {
      msg,
      handleClick
    }
  }
}
</script>
